import { Loading } from 'element-ui'
const loadingEl = new WeakMap()
const watchEl = new WeakMap()

export const tableLoading = {
  bind(el, { value }, vnode) {
    const vm = vnode.context
    let store = value

    const unwatch = vm.$watch(
      () => store.view.status === 1,
      value => {
        // 判断这值是否为true true则显示loading效果 false则关闭loading效果并移除
        if (value) {
          let LoadingInstance = loadingEl.get(el)
          // 这个loading效果存在并且处于展示状态则不重复创建
          if (LoadingInstance && LoadingInstance.visible) return
          // 获取table内容区域的dom
          const dom = el.querySelector('.el-table__body-wrapper')

          // 为选择的内容区域添加Loading效果
          LoadingInstance = Loading.service({
            target: dom,
            text: '正在加载中...'
          })
          // 单例 避免重复创建出现问题
          loadingEl.set(el, LoadingInstance)

          // el与wtch添加绑定关系 避免watch太多导致内存溢出
          watchEl.set(el, unwatch)

          // 为蒙层创建一个取消按钮
          const $cancelButton = createButton('取消')
          $cancelButton.addEventListener('click', () => {
            store.abort()
          })

          // 把重试按钮元素添加到 网络异常这个元素后面
          // 点的太快会出现两个el-text标签会出现问题 需要的是最后一个el-text标签 也就是最新创建的
          let $el = Array.from(el.querySelectorAll('.el-table__body-wrapper .el-loading-text')).pop()
          if ($el) {
            $el.append($cancelButton)
          }
        } else {
          // 关闭时移除loading效果
          const LoadingInstance = loadingEl.get(el)
          // 有可能没出现错误 没有创建这个实例 所以需要判断一下
          LoadingInstance?.close()
        }
      }
    )
  }
}

function createButton(text = '重试', color = 'black') {
  const $button = document.createElement('button')
  $button.setAttribute('type', 'button')
  $button.setAttribute('class', 'el-button el-button--text')
  $button.style.color = color
  const $span = document.createElement('span')
  $span.innerText = text
  $button.appendChild($span)
  return $button
}
